import React from "react";
import { Tabs, Collapse, Tag, Icon, Button, Input, message, Divider } from "antd";
import AddRobotAnswer from "@/pages/KnowledgeManagement/Overview/EditingKnowledge/addRobotAnswer";
import Editor from "@/utils/Editor";
import styles from "@/pages/KnowledgeManagement/Overview/EditingKnowledge/editingStyle.less";
import AddAnswer from "@/pages/KnowledgeManagement/Overview/EditingKnowledge/addAnswer";
import EditAnswer from "@/pages/KnowledgeManagement/Overview/EditingKnowledge/editAnswer";
import ReferAnswerModal from "@/pages/KnowledgeManagement/Overview/EditingKnowledge/referAnswerModal";
import { fetchDetailCustomBySlotId } from "@/services/basiccapacity";
import JsonAnswer from "@/pages/KnowledgeManagement/Overview/EditingKnowledge/jsonAnswer";
import jsonDataUtils from "@/utils/jsonDataUtils";
import ReactJson from "react-json-view";
import UserSession from "@/UserSession";

class Answer extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			robotAnswers: [
				{
					robotId: "default",
					robotName: "默认机器人",
					answers: [
						{
							isDefault: true,
							content: "",
						},
					],
				},
			],
			activeKey: "default",
			collapseKey: "0",
			isSystem: true,
			allAnswers: null,
			tagEditValues: null,
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
	}

	/**
	 * 设置答案
	 */
	setAnswer = (data) => {
		let allAnswers = JSON.parse(JSON.stringify(data));
		this.setState({
			isSystem: data.answerSource && data.answerSource == 1 ? false : true,
			allAnswers,
		}, () => this.setInfoAnswer(data.robotAnswers));
	};
	setInfoAnswer = (robotAnswers) => {
		let { activeKey } = this.state;
		let Answers = robotAnswers;
		for (let item of Answers) {
			if (item.robotId === activeKey) {
				if (item.answers.length === 0 || item.answers[0].content == null) {
					item.answers[0] = {
						isDefault: true,
						content: "",
					};
				}
			};
			//判断是否是json
			for (let answerItem of item.answers) {
				if (jsonDataUtils.isJsonString(answerItem.content)) {
					answerItem.answerType = "json";
					answerItem.jsonContent = answerItem.content;
					answerItem.content = "";
				}
			}
		};
		this.setState({ robotAnswers: Answers, });
	};

	/**
	 * 切换tab
	 */
	onChangeTabPane = (key) => {
		const that = this;
		let { robotAnswers } = that.state;
		if (key === "add") {
			that.AddRobotAnswer.initModal(robotAnswers);
		} else {
			this.setState({ activeKey: key, });
		}
	};

	/**
	 * 新增/删除 机器人
	 * @returns {*}
	 */
	onEdit = (targetKey, action) => {
		const that = this;
		let { robotAnswers } = that.state;
		switch (action) {
			case "remove":
				const newRobotAnswers = robotAnswers.filter((item) => item.robotId != targetKey);
				that.setState({ robotAnswers: newRobotAnswers, });
				break;
			case "add":
				that.AddRobotAnswer.initModal(robotAnswers);
				break;
		}
	};

	/**
	 * 新增机器人
	 * @returns {*}
	 */
	addRobotAnswers = (checkedValues, robotList) => {
		let { robotAnswers } = this.state;
		// 排除选中的机器人中之前已经选择的 只增加新选中的机器人
		// 已经添加机器人答案的机器人
		const hasSelectedRobot = robotAnswers.map((item) => item.robotId);
		// 新选择的 需要添加到答案的机器人
		const addNewRobots = checkedValues.filter(
			(item) => hasSelectedRobot.indexOf(item) === -1
		);
		// console.log("新选择的机器人：====", addNewRobots);
		// 根据机器人id获取机器人名字
		for (const item of robotList) {
			if (addNewRobots.indexOf(item.id) != -1) {
				robotAnswers.push({
					robotId: item.id,
					robotName: item.name,
					answers: [
						{
							isDefault: true,
							content: "",
						},
					],
				});
			}
		};
		this.setState({ robotAnswers, }, () => {
			this.AddRobotAnswer.cancelModal();
		});
	};

	/**
	 * 获取所有答案
	 * @returns {*}
	 */
	getAnswers = (source) => {
		let { robotAnswers } = this.state;
		const { slotData } = this.props;
		// console.log(slotData);
		if (slotData && slotData.length > 0) {
			// 有词槽情况下-取robotAnswers的答案
			// console.log("有词槽的情况下获取答案：", robotAnswers);
		} else {
			// 无词槽情况下-取富文本答案
			for (let i in robotAnswers) {
				for (let j in robotAnswers[i].answers) {
					const thisAnswer = robotAnswers[i].answers[j];
					// 答案类型为json 判断json是否合法
					if (thisAnswer.answerType && thisAnswer.answerType === "json") {
						const jsonResult = jsonDataUtils.judgeJson(thisAnswer.jsonContent);
						robotAnswers[i].answers[j].jsonResult = jsonResult;
						if (jsonResult.flag && !source) {
							robotAnswers[i].answers[j].content = thisAnswer.jsonContent;
						}
					} else {
						// 答案类型为富文本
						const result = this.getRichTextContent(j, i);
						if (result.flag) {
							robotAnswers[i].answers[j].content = result.content;
						}
					};
					// console.log(robotAnswers[i].robotName, "的机器人答案为：", robotAnswers[i]);
				}
			}
			// console.log("无词槽情况下获取答案：", robotAnswers);
		};
		return robotAnswers;
	};

	/**
	 * 获取富文本答案
	 * @returns {*}
	 */
	getRichTextContent = (answerIndex, paneIndex) => {
		const con = `content${answerIndex}${paneIndex}`;
		let obj = { flag: true, content: "", };
		console.log(this.refs[con]);
		if (con && this.refs[con]) {
			obj.content = this.refs[con].getUeditorContent();
		} else if (con && !this.refs[con]) {
			// 没有打开过当前tab页 导致ueditor没有被加载过 导致this.refs[con]取不到值 所以取robotAnswer中的值
			obj.flag = false;
		};
		return obj;
	};

	/**
	 * 打开新增答案弹窗
	 * @returns {*}
	 */
	openAddAnswer = () => {
		const { robotAnswers, activeKey } = this.state;
		let robotName = "";
		for (const item of robotAnswers) {
			if (item.robotId === activeKey) {
				robotName = item.robotName;
			}
		};
		this.AddAnswer.initModal(robotName, activeKey);
	};

	/**
	 * 新增词槽答案保存
	 * @returns {*}
	 */
	addSlotAnswer = (answer, robotId) => {
		let { robotAnswers } = this.state;
		for (let item of robotAnswers) {
			if (item.robotId === robotId) {
				item.answers.push(answer);
			}
		};
		// console.log(robotAnswers);
		this.setState({ robotAnswers, });
	};

	/**
	 * 切换预览的答案
	 * @returns {*}
	 */
	changeCollapse = (value) => {
		this.setState({ collapseKey: value, });
	};

	/**
	 * 打开编辑答案弹窗
	 * @returns {*}
	 */
	openEditAnswer = (answerIndex) => {
		const { robotAnswers, activeKey } = this.state;
		let robotName = "";
		let answer = [];
		for (const item of robotAnswers) {
			if (item.robotId === activeKey) {
				robotName = item.robotName;
				answer = item.answers[answerIndex];
			}
		};
		const obj = { robotName, activeKey, answerIndex, answer, };
		this.EditAnswer.initModal(obj);
	};

	/**
	 * 编辑答案保存
	 */
	editSlotAnswer = (answer, robotId, answerIndex) => {
		let { robotAnswers } = this.state;
		const newRobotAnswers = [];
		// console.log(answer, robotId, answerIndex);
		for (let item of robotAnswers) {
			if (item.robotId === robotId) {
				item.answers[answerIndex] = answer;
			};
			newRobotAnswers.push(item);
		};
		// console.log("编辑后的答案========", newRobotAnswers);
		this.setState({ robotAnswers: newRobotAnswers, });
	};

	/**
	 * 删除答案
	 * @returns {*}
	 */
	removeAnswer = (answers, answerIndex) => {
		let { robotAnswers, activeKey, allAnswers } = this.state;
		let newAnswers = answers.filter((item, i) => i != answerIndex);
		for (let item of robotAnswers) {
			if (item.robotId === activeKey) {
				item.answers = newAnswers;
			}
		};
		let data = JSON.parse(JSON.stringify(allAnswers.robotAnswers));
		for (let item of data) {
			if (item.robotId === activeKey) {
				item.answers = answers;
			}
		};
		this.setState({ robotAnswers, allAnswers: { ...allAnswers, robotAnswers: data } });
	};

	/**
	 * 删除所有词槽后 删除所有词槽答案
	 * @returns {*}
	 */
	removeSlotAnswer = () => {
		let { robotAnswers } = this.state;
		for (let item of robotAnswers) {
			const newAnswers = item.answers.filter(
				(answerItem) => answerItem.isDefault === true
			);
			item.answers = newAnswers;
		};
		this.setState({ robotAnswers, });
	};

	/**
	 * 打开引用答案弹窗
	 * @returns {*}
	 */
	openReferAnswer = (type) => {
		this.ReferAnswerModal.openModal(type);
	};

	/**
	 * 添加答案
	 */
	addAnswer = () => {
		let { robotAnswers, activeKey } = this.state;
		for (let i in robotAnswers) {
			if (robotAnswers[i].answers.length === 1 && robotAnswers[i].robotId === activeKey) {
				const thisAnswer = robotAnswers[i].answers[0];
				// 答案类型为json 判断json是否合法
				if (thisAnswer.answerType && thisAnswer.answerType === "json") {
					const jsonResult = jsonDataUtils.judgeJson(thisAnswer.jsonContent);
					robotAnswers[i].answers[0].jsonResult = jsonResult;
					if (jsonResult.flag && !source) {
						robotAnswers[i].answers[0].content = thisAnswer.jsonContent;
					}
				} else {
					// 答案类型为富文本
					const result = this.getRichTextContent(0, i);
					if (result.flag) {
						robotAnswers[i].answers[0].content = result.content;
					}
				};
			};
		};
		this.setState({ robotAnswers }, () => this.props.addActivePaneAnswer());
	}

	/**
	 * 设置当前答案为引用答案 noSlot:没有词槽的情况 slotAdd:有词槽情况下 添加答案 slotEdit:有词槽情况下 修改答案
	 * @returns {*}
	 */
	setReferAnswer = (row, openType) => {
		switch (openType) {
			case "noSlot":
				let { activeKey, robotAnswers } = this.state;
				for (let item of robotAnswers) {
					if (item.robotId === activeKey) {
						if (item.answers.length > 0) {
							for (let answer of item.answers) {
								answer.content = row.answer;
								answer.contentId = row.id;
								answer.isRefer = true;
								answer.question = row.question;
								/* 若之前的答案类型为json 则引用答案之后需要将类型修改为富文本 防止取消引用后保存content会被jsonContent覆盖 */
								answer.answerType = "richText";
							}
						} else {
							item.answers.push({
								content: row.answer,
								contentId: row.id,
								isRefer: true,
								question: row.question,
							});
						}
					}
				};
				this.setState({ robotAnswers, }, () => {
					this.ReferAnswerModal.cancelModal();
				});
				break;
			case "slotAdd":
				this.AddAnswer.changeContentFromRefer(row);
				this.ReferAnswerModal.cancelModal();
				break;
			case "slotEdit":
				this.EditAnswer.changeAnswerByRefer(row);
				this.ReferAnswerModal.cancelModal();
				break;
		}
	};

	/**
	 * 取消引用（没有词槽的时候）
	 * @returns {*}
	 */
	cancelRefer = () => {
		let { activeKey, robotAnswers } = this.state;
		for (let item of robotAnswers) {
			if (item.robotId === activeKey) {
				for (let answer of item.answers) {
					answer.isRefer = false;
					answer.contentId = undefined;
					answer.question = undefined;
				}
			}
		};
		this.setState({ robotAnswers });
	};

	/*
	 * 设置默认答案为json
	 * */
	toJson = (answerIndex, paneIndex) => {
		let { robotAnswers } = this.state;
		const answerContent = this.getRichTextContent(answerIndex, paneIndex);
		let thisAnswer = robotAnswers[paneIndex].answers[answerIndex];
		// console.log("----", answerIndex, paneIndex, answerContent, robotAnswers, thisAnswer);
		// 1.获取当前编辑框内的富文本内容，保存至content中，为了json编辑时返回富文本编辑后还能显示之前的内容
		thisAnswer.content = answerContent.content;
		// 2.修改当前答案的类型为json
		thisAnswer.answerType = "json";
		// 3.判断是否有保留的json，有则显示保留的json，无则赋值初始json
		if (!thisAnswer.jsonContent) {
			thisAnswer.jsonContent = JSON.parse(JSON.stringify(jsonDataUtils.initJsonData));
		};
		robotAnswers[paneIndex].answers[answerIndex] = thisAnswer;
		// console.log("====", robotAnswers, thisAnswer);
		this.setState({ robotAnswers, });
	};

	/**
	 * 修改json答案
	 * @returns {*}
	 */
	updateJsonAnswer = (newAnswer, answerIndex, paneIndex) => {
		let { robotAnswers } = this.state;
		robotAnswers[paneIndex].answers[answerIndex] = newAnswer;
		this.setState({ robotAnswers, });
	};

	render() {
		const { robotAnswers, activeKey, collapseKey, isSystem, allAnswers, tagEditValues } = this.state;
		const { slotData, slotDetailArr, userTagList, urlPrefix } = this.props;
		const infoData = JSON.parse(JSON.stringify(robotAnswers)).filter(item => item.robotId === activeKey);
		const slotAnswerHeader = (answer) => {
			return <>
				{answer.slotValues && answer.slotValues.length > 0 ? answer.slotValues.map((slotValueItem, slotValueIndex) => {
					return (
						<>
							<span key={slotValueIndex}>
								<span>&lt;{slotValueItem.slotName}&gt;=</span>
								{slotValueItem.values.map((tag, tagIndex) => {
									return (
										<Tag color='#11CBFF' style={{ margin: '2px 2px 0 0', borderRadius: 12 }} key={tagIndex}>{tag}</Tag>
									);
								})}
							</span>
							{slotValueIndex + 1 < answer.slotValues.length ? (
								<Divider type="vertical" />
							) : null}
						</>
					);
				}) : null}
				{answer.slotValues && answer.slotValues.length > 0 && answer.userTagIdList && answer.userTagIdList.length > 0 ? (
					<Divider type="vertical" />
				) : null}
				{answer.userTagIdList && answer.userTagIdList.length > 0 ? (
					<span>
						<span>&lt;{'用户标签'}&gt;=</span>
						{answer.userTagIdList.map((tag, tagIndex) => {
							return (
								<Tag color='#11CBFF' style={{ margin: '2px 2px 0 0', borderRadius: 12 }} key={tagIndex}>{tag.tagName}</Tag>
							);
						})}
					</span>
				) : null}
			</>
		};
		const getExtra = (answers, answerIndex, isDefault) => (
			<span>
				{UserSession.isSystemKnowledge() && isSystem ? '' : (
					<>
						<Icon
							type='edit'
							onClick={() => {
								this.setState({ tagEditValues: answers[answerIndex].userTagIdList }, () => this.props.addSlotAnswer("edit", answerIndex))
							}}
							style={{ marginRight: 10, color: "#11CBFF", cursor: "pointer" }}
						/>
						{isDefault ? ("") : (
							<Icon
								type='close'
								onClick={(e) => {
									e.stopPropagation();
									this.removeAnswer(answers, answerIndex);
								}}
								style={{ color: "#11CBFF", cursor: "pointer" }}
							/>
						)}
					</>
				)}
			</span>
		);
		const referAnswerHeader = (referQuestion) => (
			<span>引用自答案库：<a>{referQuestion}</a></span>
		);
		const referAnswerExtra = UserSession.isSystemKnowledge() ? null : (
			<span>
				<span style={{ marginRight: 5, color: "#11cbff" }} onClick={() => this.openReferAnswer("noSlot")}>更换</span>
				<span style={{ color: "#11cbff" }} onClick={this.cancelRefer}>取消引用</span>
			</span>
		);
		const operations = UserSession.isSystemKnowledge() ? (isSystem ? (
			<Button
				size="small"
				style={{ backgroundColor: "#E5ECF4" }}
				onClick={() => this.setState({ isSystem: false }, () => {
					let data = JSON.parse(JSON.stringify(allAnswers.robotAnswers));
					for (let item of data) {
						if (typeof item.answers === 'object') {
							for (let answer of item.answers) {
								answer.isRefer = false;
								answer.contentId = null;
								answer.question = null;
							}
						}
					};
					this.setInfoAnswer(data)
				})}
			>
				使用本地答案
			</Button>
		) : (
			<span>
				{!UserSession.isAdmin() ? (
					<Button
						size="small"
						style={{ backgroundColor: "#E5ECF4", marginRight: 10 }}
						onClick={() => this.props.addActivePaneAnswer()}
					>
						添加答案
					</Button>
				) : slotData && slotData.length > 0 ? (
					<Button
						size="small"
						style={{ backgroundColor: "#E5ECF4", marginRight: 10 }}
						onClick={() => this.props.addActivePaneAnswer()}
					>
						添加答案
					</Button>
				) : null}
				{UserSession.isSystemDataKnowledge() ? null : (
					<>
						{(infoData[0].answers && infoData[0].answers.length > 1) || (slotData && slotData.length > 0) ? null : (
							<Button
								size="small"
								style={{ backgroundColor: "#E5ECF4", marginRight: 10 }}
								onClick={() => this.openReferAnswer("noSlot")}
							>
								引用答案
							</Button>
						)}
					</>
				)}
				<Button
					size="small"
					style={{ backgroundColor: "#E5ECF4" }}
					onClick={() => this.setState({ isSystem: true }, () => {
						this.setInfoAnswer(allAnswers.answerSource == 1 ? allAnswers.answersHeadquarters : allAnswers.robotAnswers)
					})}
				>
					使用系统答案
				</Button>
			</span>
		)) : (
			<span>
				{!UserSession.isAdmin() ? (
					<Button size="small" style={(infoData[0].answers && infoData[0].answers.length > 1) || (slotData && slotData.length > 0) ? { backgroundColor: "#E5ECF4" } : { backgroundColor: "#E5ECF4", marginRight: 10 }} onClick={() => this.addAnswer()}>添加答案</Button>
				) : slotData && slotData.length > 0 ? (
					<Button size="small" style={{ backgroundColor: "#E5ECF4", marginRight: 10 }} onClick={() => this.props.addActivePaneAnswer()}>添加答案</Button>
				) : null}
				{UserSession.isSystemDataKnowledge() ? null : (
					<>
						{(infoData[0].answers && infoData[0].answers.length > 1) || (slotData && slotData.length > 0) ? null : (
							<Button size="small" style={{ backgroundColor: "#E5ECF4" }} onClick={() => this.openReferAnswer("noSlot")}>引用答案</Button>
						)}
					</>
				)}
			</span>
		);
		const robotName = (pane) => {
			if (pane.robotName !== '系统答案') {
				return pane.robotName;
			} else {
				if (UserSession.isAdmin() || (UserSession.isSystemKnowledge() && isSystem)) {
					return pane.robotName;
				};
				return '默认所有应用';
			}
		};
		return (
			<div className={styles.Answers}>
				<Tabs
					onChange={this.onChangeTabPane}
					activeKey={activeKey}
					type='editable-card'
					onEdit={this.onEdit}
					tabBarExtraContent={operations}
					hideAdd={true}
				>
					{robotAnswers.map((pane, paneIndex) => (
						<Tabs.TabPane tab={robotName(pane)} key={pane.robotId} closable={pane.robotId != "default"}>
							{// 判断是否有词槽 有则答案为预览状态 点击右边的编辑按钮 弹窗编辑答案   没有词槽则展示富文本编辑框 编辑默认答案
							slotData && slotData.length > 0 ? (
								<Collapse accordion activeKey={[collapseKey]} expandIconPosition="right" className={styles.collapseBox} onChange={this.changeCollapse}>
									{pane.answers.map((answer, answerIndex) => {
										return (
											<Collapse.Panel
												header={answer.isDefault ? "默认条件答案" : slotAnswerHeader(answer)}
												key={answerIndex}
												extra={getExtra(pane.answers, answerIndex, answer.isDefault)}
												className={answer.question ? styles.referStyle : ""}
											>
												{// 有词槽情况下 判断是否是引用答案 若是 则添加引用信息 若不是 则正常展示
												answer.question ? (
													<div className={styles.referTitle}>
														{referAnswerHeader(answer.question)}
													</div>
												) : ("")}
												{// 判断是否是json 是则json编辑器展示 不是则正常展示
												answer.answerType && answer.answerType === "json" ? (
													// <ReactJson src={answer.jsonContent} />
													<Input.TextArea
														value={answer.jsonContent}
														disabled={true}
														rows={15}
														style={{
															cursor: "unset",
															background: "#ffffff",
															color: "unset",
														}}
													/>
												) : (
													<div dangerouslySetInnerHTML={{ __html: answer.content }} />
												)}
											</Collapse.Panel>
										);
									})}
								</Collapse>
							) : (
								<div>
									{pane.answers.length > 1 ? (
										<Collapse
											accordion
											activeKey={[collapseKey]}
											expandIconPosition={"right"}
											className={styles.collapseBox}
											onChange={this.changeCollapse}
										>
											{pane.answers.map((answer, answerIndex) => {
												return (
													<Collapse.Panel
														header={answer.isDefault ? "默认条件答案" : slotAnswerHeader(answer)}
														key={answerIndex}
														extra={getExtra(pane.answers, answerIndex, answer.isDefault)}
														className={answer.question ? styles.referStyle : ""}
													>
														{// 有词槽情况下 判断是否是引用答案 若是 则添加引用信息 若不是 则正常展示
														answer.question ? (
															<div className={styles.referTitle}>
																{referAnswerHeader(answer.question)}
															</div>
														) : ("")}
														{// 判断是否是json 是则json编辑器展示 不是则正常展示
														answer.answerType && answer.answerType === "json" ? (
															// <ReactJson src={answer.jsonContent} />
															<Input.TextArea
																value={answer.jsonContent}
																disabled={true}
																rows={15}
																style={{
																	cursor: "unset",
																	background: "#ffffff",
																	color: "unset",
																}}
															/>
														) : (
															<div dangerouslySetInnerHTML={{ __html: answer.content }} />
														)}
													</Collapse.Panel>
												);
											})}
										</Collapse>
									) : (
										<>
											{ // 无词槽情况下 判断是否是引用答案 若是 则当前编辑框变为预览状态 并展开 若不是 则为富文本编辑框
												pane.answers.length > 0 && pane.answers[0].question ? (
													<Collapse expandIconPosition={"right"} defaultActiveKey={pane.answers[0].id}>
														<Collapse.Panel
															header={referAnswerHeader(pane.answers[0].question)}
															extra={UserSession.isSystemKnowledge() && isSystem ? null : referAnswerExtra}
															key={pane.answers[0].id}
														>
															<div dangerouslySetInnerHTML={{ __html: pane.answers[0].content }} />
														</Collapse.Panel>
													</Collapse>
												) : // 判断是否是json编辑 若是 则当前为textarea状态 若不是 则为富文本编辑框
												pane.answers[0].answerType && pane.answers[0].answerType === "json" ? (
													<JsonAnswer
														jsonContent={pane.answers[0].jsonContent}
														answerIndex={0}
														paneIndex={paneIndex}
														updateJsonAnswer={this.updateJsonAnswer}
														typeOfAnswer={"default"}
														answer={pane.answers[0]}
													/>
												) : UserSession.isSystemKnowledge() && isSystem ? (
													<div
														dangerouslySetInnerHTML={{ __html: pane.answers.length > 0 ? pane.answers[0].content : "" }}
														style={{ border: '1px solid #e7e7e7', padding: '20px' }}
													/>
												) : (
													<Editor
														content={pane.answers.length > 0 ? pane.answers[0].content : ""}
														name={`content${0}${paneIndex}`}
														id={`content${0}${paneIndex}`}
														ref={`content${0}${paneIndex}`}
														toJson={() => this.toJson(0, paneIndex)}
													/>
												)
											}
										</>
									)}
								</div>
							)}
						</Tabs.TabPane>
					))}
					{!(UserSession.isSystemKnowledge() && isSystem) && !UserSession.isAdmin() ? (
						<Tabs.TabPane key={"add"} tab={"+"} closable={false}></Tabs.TabPane>
					) : null}
				</Tabs>

				<AddRobotAnswer
					onRef={(ref) => (this.AddRobotAnswer = ref)}
					addRobotAnswers={this.addRobotAnswers}
					robotAnswers={robotAnswers}
				/>
				<AddAnswer
					onRef={(ref) => (this.AddAnswer = ref)}
					slotDetailArr={slotDetailArr}
					userTagList={userTagList}
					addSlotAnswer={this.addSlotAnswer}
					openReferAnswer={this.openReferAnswer}
				/>
				<EditAnswer
					onRef={(ref) => (this.EditAnswer = ref)}
					slotDetailArr={slotDetailArr}
					userTagList={userTagList}
					tagEditValues={tagEditValues}
					editSlotAnswer={this.editSlotAnswer}
					openReferAnswer={this.openReferAnswer}
				/>
				<ReferAnswerModal
					onRef={(ref) => (this.ReferAnswerModal = ref)}
					setReferAnswer={this.setReferAnswer}
				/>
			</div>
		);
	}
}

export default Answer;
